<!--角色列表-->
<template>
  <div class="role-list-root">
    <!--条件搜索表单-->
    <el-form :inline="true" :model="form" ref="queryRef" class="demo-form-inline">

      <el-form-item label="角色名称" prop="roleName">
        <el-input v-model="form.roleName" clearable @keyup.enter.native="getRoleList" @change="getRoleList"/>
        <!--                <el-select v-model="form.roleId" @change="getRoleList">-->
        <!--                    <el-option v-for="(item, i) in roleList" :key="i" :label="item.label" :value="item.value"></el-option>-->
        <!--                </el-select>-->
      </el-form-item>
      <el-form-item label="角色类型" prop="type">
        <el-select v-model="form.type" @change="getRoleList">
          <el-option v-for="(item, i) in typeList" :key="i" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="getRoleList">查询</el-button>
        <el-button @click="resetForm('queryRef')">重置</el-button>
        <el-button type="success" icon="el-icon-plus" @click="handleAdd">添加角色</el-button>
      </el-form-item>
    </el-form> <!--// 条件搜索表单-->

    <!--系统角色列表-->
    <el-table
        :data="roleList"
        style="width: 100%"
        height="540">
      <el-table-column fixed label="" type="selection" width="55"></el-table-column>
      <el-table-column prop="roleId" label="角色ID" width="120" show-overflow-tooltip></el-table-column>
      <el-table-column prop="roleName" label="角色名称" width="150"></el-table-column>
      <el-table-column prop="typeName" label="角色类型" width="150"></el-table-column>
      <el-table-column prop="isDefault" label="默认" width="80">
        <template slot-scope="scope">
          {{ scope.row.isDefault === 1 ? '是' : '否' }}
        </template>
      </el-table-column>
      <el-table-column
          label="操作"
          width="300">

        <template slot-scope="scope">
          <!--详情按钮-->
          <el-button
              size="mini"
              type="warning"
              @click="handleDetail(scope.$index, scope.row)" icon="el-icon-document">查看
          </el-button>
          <!--编辑按钮-->
          <el-button
              size="mini"
              type="primary"
              @click="handleEdit(scope.$index, scope.row)" icon="el-icon-edit">编辑
          </el-button>
          <!--删除确认框-->
          <el-popconfirm title="确认删除吗?"
                         @confirm="handleDelete(scope.$index, scope.row)"
                         style="margin-left: 10px">
            <!--删除按钮-->
            <el-button type="danger" size="mini" icon="el-icon-delete"
                       slot="reference">删除
            </el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table><!--/ 系统角色列表-->

    <!--分页插件-->
    <div>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageParam.pageNum"
          :page-sizes="pageParam.sizes"
          :page-size="pageParam.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageParam.total">
      </el-pagination>
    </div><!--/ 分页插件-->

    <!--添加角色-->
    <RoleAdd v-if="addFlag" :role-types="typeList" @close="handleClose"/>

    <!--角色详情-->
    <RoleDetail v-if="detailFlag" :role-dto="roleDTO" :role-types="typeList" @close="handleClose"/>

    <!--角色编辑-->
    <RoleEdit v-if="editFlag" :role-dto="roleDTO" :role-types="typeList" @close="handleClose"/>
  </div>
</template>

<script>
import API from '@/api/api'
import RoleAdd from "../../../components/roleList/RoleAdd";
import RoleDetail from "../../../components/roleList/RoleDetail";
import RoleEdit from "../../../components/roleList/RoleEdit";

export default {
  name: "RoleList",
  components: {
    RoleAdd,
    RoleDetail,
    RoleEdit
  },
  data() {
    return {
      // 用于组件之前数据传输
      roleDTO: {},
      //
      form: {
        roleName: "",
        type: null
      },
      //
      roleList: [],
      //
      typeList: [],
      // 添加角色对话框标志位
      addFlag: false,
      detailFlag: false,
      editFlag: false,
      // 分页参数
      pageParam: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        sizes: [5, 10, 50, 100, 200],
      },
    }
  },
  mounted() {
    this.roleTypes();
    this.getRoleList();
  },
  methods: {
    roleTypes() {
      this.$get(API.sysRole.roleTypes).then(res => {
        let data = res.data;
        this.typeList = data.data;
        this.typeList.map(item => {
          item.label = item.msg;
          item.value = item.code;
        })
      })
    },
    handleClose() {
      this.addFlag = false;
      this.detailFlag = false;
      this.editFlag = false;
      this.getRoleList();
    },
    // 角色列表查询
    getRoleList() {
      let url = API.sysRole.roleList;
      let param = {
        pageNum: this.pageParam.pageNum,
        pageSize: this.pageParam.pageSize,
        param: JSON.parse(JSON.stringify(this.form))
      };
      this.$post(url, param).then(res => {
        let data = res.data;
        if (data.success) {
          this.roleList = data.data.list;
          this.roleList.map(item => {
            item.label = item.roleName;
            item.value = item.roleId;
          });
          this.pageParam.total = data.data.total;
        }
      });
    },
    // 删除
    handleDelete(index, row) {
      if (row.isDefault === 1 && !this.$hasAdmin) {
        this.$message.closeAll();
        this.$message.warning({
          showClose: true,
          message: "请联系管理员删除默认角色"
        });
        return;
      }
      this.$post(API.sysRole.delete, {roleId: row.roleId}).then(res => {
        let data = res.data;
        if (!data.success) {
          this.$message.error({message: data.msg})
        } else {
          this.$message.success({message: data.msg})
        }
      })
      this.getRoleList();
    },
    // 添加角色
    handleAdd() {
      this.addFlag = true;
    },
    handleDetail(index, row) {
      this.detailFlag = true;
      this.roleDTO = row;
    },
    handleEdit(index, row) {
      this.editFlag = true;
      this.roleDTO = row;
    },
    // 重置表单
    resetForm(ref) {
      this.$refs[ref].resetFields();
      this.pageParam.pageNum = 1;
      this.pageParam.pageSize = 10;
      this.getRoleList();
    },
    // 分页
    handleSizeChange(val) {
      this.pageParam.pageSize = val;
      this.getRoleList();
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.pageParam.pageNum = val;
      this.getRoleList();
      console.log(`当前页: ${val}`);
    }
  }
}
</script>

<style scoped>

</style>
